<template>
    <div class="micro-audio">
        <audio ref="audio" :src="data.audioUrl">
        您的浏览器不支持此播放器。
        </audio>
        <div class="title-img" :style="{'background-image': 'url(' + data.backImg + ')'}">
        </div>
        <div class="title-word">
            {{data.title}}
        </div>
        <div class="audio-cont">
            <div class="audio-s" :class="{'play': isPlaying}" @click="togglePlay"></div>
            <div class="audio-decs">
                <div class="top-line">{{data.title}}</div>
                <div class="btm-line"><span>时长：{{data.audioDuration}}</span><span>{{data.audioSize}}</span></div>
            </div>
        </div>
        <div class="article-cont">
            <div class="article-title">
                <div class="article-img" :style="{'background-image': 'url('+data.audioImg+')'}">
                </div>
                <div class="article-user">{{data.authorText}}</div>
            </div>
            <div class="article-word">
                {{data.summary}}
            </div>
        </div>
        <div class="gray-div"></div>
        <div class="user-msg">
            <div class="msg-title">
                用户留言
            </div>
            <ul class="msg-list">
                <li class="list-item" v-if="comments.length" v-for="(item, i) in comments" :key="i">
                    <div class="item-img">
                        <img src="item.reviewersHead">
                    </div>
                    <div class="item-deatail">
                        <div class="top-line">
                            {{item.reviewersName}}
                            <div class="thum">
                                <span class="icon"></span>{{data.praiseNum}}
                            </div>
                        </div>
                        <div class="btm-line"><span>{{data.createDate}}</span></div>
                    </div>
                    <div class="msg-word">
                        {{data.content}}
                    </div>
                </li>
            </ul>
        </div>
        <com-dialog v-if="showDialog" :dialogConent="dialogConent" @leftBtn="cancelBtn" @rightBtn="sureBtn"></com-dialog>
    </div>
    
</template>
<script>
    import comDialog from '@/components/comDialog.vue'
    import { Toast } from 'mint-ui';
    import market from '@/api/market.js'
    export default {
        components: {
            comDialog
        },
        data () {
            return {
                isPlaying: false,
                data: {},
                comments: [],
                currentTime: 0,
                showDialog: false,
                dialogConent: {
                    title: ' 试听结束,请购买成为VIP年会员',
                    left: '返回',
                    right: '开通VIP'
                },
            }
        },
        created() {
            let id = this.$route.query.id;
            market.getMindDetail(id).then(res => {
                if (res.code == 0) {
                    this.data = res.result;
                } else {
                    Toast({
                        message: res.message,
                        duration: 2000
                    });
                }
            });
            market.getComments(id, 1, 10).then(res => {
                if (res.code == 0) {
                    this.data = res.result;
                } else {
                    Toast({
                        message: res.message,
                        duration: 2000
                    });
                }
            });
            this.ctrlPlay();
        },
        methods: {
            cancelBtn () {
                setTimeout (() => {
                    this.showDialog = false
                }, 200)
            },
            sureBtn () {
                setTimeout (() => {
                    this.showDialog = false
                }, 200)
            },
            togglePlay() {
                this.isPlaying ? this.audioPause() : this.audioPlay()
            },
            audioPlay() {
                if (this.currentTime < 180) {
                    this.$refs.audio.play()
                    this.isPlaying = true
                } else {
                    this.showDialog = true;
                }
            },
            ctrlPlay() {
                let aa = setInterval(()=>{
                    this.currentTime = this.$refs.audio.currentTime;
                    if (this.currentTime > 180) {
                        this.$refs.audio.pause()
                        this.showDialog = true;
                        clearInterval(aa);
                        this.isPlaying = false
                    }
                    
                }, 1000)
            },
            audioPause() {
                this.$refs.audio.pause()
                this.isPlaying = false
            },
        }
    }
</script>
<style lang="less" scoped>
    .micro-audio {
        .gray-div {
            height: .2rem;
            background-color: #fbfbfb;
        }
        .title-img {
            height: 3rem;
            background-size: cover;
            background-position: center center;
        }
        .title-word {
            font-weight: bold;
            font-size: .35rem;
            margin-top: .3rem;
            margin-bottom: .3rem;
            margin-left: .3rem;
        }
        .audio-cont {
            margin: 0 .3rem;
            padding: .2rem .4rem;
            background-color: #fbfbfb;
            margin-bottom: .35rem;
            border: 1px solid #ccc;
        }
        .audio-s {
            width: .6rem;
            height: .6rem;
            float: left;
            margin-top: .1rem;
            background-image: url(../../../assets/img/audio-pause.png);
            background-size: contain;
        }
        .play {
            background-image: url(../../../assets/img/audio-play.png);
        }
        .audio-decs {
            margin-left: 1rem;
            .top-line {
                font-size: .3rem;
            }
            .btm-line {
                font-size: .26rem;
                color: #707070;
            }
        }
        .btm-line {
            span:last-child {
                margin-left: .2rem;
            }
        }
        .article-title {
            margin-left: .3rem;
            .article-img {
                width: .8rem;
                height: .8rem;
                float: left;
                border-radius: 50%;
                background-size: cover;
            }
            .article-user {
                font-size: .32rem;
                font-weight: bold;
                margin-left: 1rem;
                height: .8rem;
                line-height: .8rem;
            }
        }
        .article-word {
            padding: .25rem .3rem .35rem;
            font-size: .3rem;
            border-bottom: 1px solid #ccc;
        }
        .user-msg {
            
            .msg-title {
                
                height: 1rem;
                margin: 0 .3rem;
                font-size: .3rem;
                line-height: 1rem;
                border-bottom: 1px solid #ccc;
            }
            .list-item {
                
                margin-left: .3rem;
                padding-top: .3rem;
                padding-bottom: .2rem;
                overflow: hidden;
                border-bottom: 1px solid #ccc;
                .item-img {
                    width: .8rem;
                    height: .8rem;
                    float: left;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        display: block;
                        height: .8rem;
                    }
                }
                .item-deatail {
                    margin-left: 1rem;
                    .top-line {
                        font-size: .3rem;
                    }
                    .btm-line {
                        font-size: .26rem;
                        color: #707070;
                    }
                    .thum {
                        span {
                            display: inline-block;
                            margin-right: .15rem;
                            background-size: contain;
                            width: .22rem;
                            height: .22rem;
                            background-repeat: no-repeat;
                            background-image: url(../../../assets/img/thumb-icon.png)
                        }
                        float: right;
                        margin-right: .3rem;
                        font-size: .3rem
                    }

                }
                .msg-word {
                    margin-top: .2rem;
                    margin-left: 1rem;
                    font-size: .3rem;
                }
            }
        }
    }
</style>